<template>
    <div>
        <div class="ui container"  v-for="(willNotUse,index) in a_p.icon.length" :key="index">
            <div class="ui dividing small header"><i class="ui icon" :class="a_p.icon[index]"></i> {{a_p.label[index]}}</div>
            <div class="content" v-if="index != 3">
                <span>{{a_p.content[index] ? a_p.content[index] : '尚未绑定' }}</span><a style="float: right" href="javascript:void(0)" @click="reviseInfo">修改</a>
            </div>
            <div class="ui container third-party-login" v-else>
                <icon name="wechat" scale="4"></icon><a href="javascript:void(0)">绑定微信</a>
            </div>
        </div>
    </div>
</template>
<script>
import { api_account } from '@/api'
import {mapState} from 'vuex'
export default {
    data () {
        return {
            a_p: {
                icon: ['envelope', 'phone', 'user secret', 'cloudsmith'],
                label: ['邮箱', '手机号', '密码', '第三方登陆'],
                content: []
            },
            email: ''
        }
    },
    mounted () {
        this.getA_P()
    },
    methods: {
        getA_P () {
            this.$http({
                url: api_account + '/basic',
                method: 'get'
            })
            .then(res => {
                let pwdCover = new Array(res.data.data.password.length).fill('*').join('')
                this.a_p.content = [res.data.data.account, res.data.data.phone, pwdCover]
            })
        },
        reviseInfo () {

        }
    },
    computed: {
        ...mapState(['user'])
    }
}
</script>
<style lang="stylus" scoped>
.ui.container
    margin-bottom 60px

.third-party-login
    svg
        vertical-align -50%
</style>
